<template>
  <div class="page">
    <!-- 表单 -->
    <div class="left">
      <Form />
    </div>
    <!-- 内容区组件 -->
    <div class="right"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import Form from './form.vue';
  import { useAiStore } from '@/store/ai';

  const aiStore = useAiStore();

  onMounted(() => {
    aiStore.getGenerateResults();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .page {
    display: flex;
  }
  .left {
    width: 480px;
    background-color: white;
    border-top: 1px solid $primary-border-color;
  }
  .right {
    flex: 1;
    overflow-y: auto;
    height: calc(100vh - 64px);
  }
</style>
